<template>
	<view>
		<view class="settle-box">
			<!-- 选择框 -->
			<view class="radio-box">
				<label class="radio" @click="clickHandler">
					<radio :checked="isAllchecked" color="#ea4350" />
					<text>全选</text>
				</label>
			</view>
			<!-- 总金额 -->
			<view class="all-money">
				合计：<text class="res"> ¥ {{checkedPrice}}</text>
			</view>
			<!-- 结算按钮 -->
			<view class="btn" @click="settle">
				结算（{{checkedCount}}）
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapMutations,
	} from 'vuex'
	export default {
		name: "my-settle",
		data() {
			return {

			};
		},
		computed: {
			...mapState('m_cart', ['cart']),
			...mapState('m_user', ['address', 'token']),
			...mapGetters('m_user', ['addstr']),
			...mapGetters('m_cart', ['checkedCount', 'allGoodsCount', 'checkedPrice']),
			isAllchecked() {
				return this.checkedCount === this.allGoodsCount
			}

		},
		methods: {
			...mapMutations('m_user', ['updateRedirectInfo']),
			...mapMutations('m_cart',['updateCart']),
			// 支付
			async payment() {
				// 准备订单
				// 准备参数
				const params = {
					// 订单总价
					// order_price:this.checkedPrice
					order_price: 0.01,
					// 收货地址
					consignee_addr: this.addstr,
					goods: this.cart.filter(e => e.goods_state).map(e => {
						if (e.goods_state) {
							return {
								goods_id: e.goods_id,
								goods_number: e.goods_count,
								goods_price: e.goods_price
							}
						}
					})
				}
				console.log(params);
				const orderRes = await uni.$http.post('/api/public/v1/my/orders/create',params)
				if(orderRes.data.meta.status!==200) return uni.$showMsg('失败')
				// console.log(orderRes);
				// 订单预支付-为了获取支付的参数
				const res  = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder',{
					order_number:orderRes.data.message.order_number
				})
				console.log(res);
				if(res.data.meta.status !== 200)return uni.$showMsg('订单预支付失败')
				// console.log(res.data.message.pay);
				// 支付
			    const [payErr] = await uni.requestPayment(res.data.message.pay)
				if(payErr)return uni.$showMsg('支付失败')
				// 提示用户
				uni.$showMsg('支付成功')
				// 清除以勾选商品
				this.updateCart(this.cart.filter(e=> !e.goods_state))
			},
			async settle() {
				// 判断是否选中了收货地址
				if (Object.keys(this.address).length === 0) return uni.$showMsg('请选中收货地址')
				// 判断是否选中了结算商品
				if (this.checkedCount === 0) return uni.$showMsg('请选择要结算的商品')
				// 判断是否登陆
				if (!this.token) {
					let n = 3
					uni.$showMsg(`请登录后进行结算，页面将在${n}秒后跳转到登陆`)
					let timer = setInterval(() => {
						n--
						if (n === 0) {
							// 清空定时器
							clearInterval(timer)
							// 跳转到登陆
							uni.switchTab({
								url: '/pages/my/my',
								success: () => {
									// 设置参数redirectInfo
									this.updateRedirectInfo({
										from: '/pages/cart/cart',
										type: 'switchTab'
									})
								}
							})
							return
						}
						// 打开弹框
						uni.$showMsg(`请登录后进行结算，页面将在${n}秒后跳转到登陆`)

					}, 1000)
					return
				}
				this.payment()
			},
			clickHandler() {
				this.$emit('all-radio-change', !this.isAllchecked)
			}
		}
	}
</script>

<style lang="scss">
	.settle-box {
		height: 50px;
		box-sizing: border-box;
		border-top: 1px solid #eee;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		background-color: #fff;

		.res {
			color: #ea4350;
			font-size: 14px;
		}

		.btn {
			width: 90px;
			color: #fff;
			line-height: 50px;
			text-align: center;
			background-color: #ea4350;
		}
	}
</style>
